{extend name="base" /}

{block name="content"}
<!--<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">-->
<div class="g-main">

    <div class="m-main-title">

        <div class="m-container-fluid">

            <a href="{:url('index/welcome')}"><i class="icon icon-home"></i>首页</a>

            <span class="icon-angle-right"></span>

            <span>系统</span>

            <span class="icon-angle-right"></span>

            <span>分销设置</span>

            <span class="icon-angle-right"></span>

            <span>分销海报设置</span>

            <a class="u-flush"><i class="icon-repeat"></i></a>

        </div>

    </div>

    <div class="m-main-content">

        <div class="m-container">

            <div class="m-tab-tit clearfix">

            </div>

            <div class="m-form mt-10">
                <div style="width: 40%;height: 600px;border:1px dashed #000;margin-right: 100px;float: left">

                </div>
                <form class="layui-form" id="j_form"  style="float: right ;width: 50%">

                    <div class="m-tab-con">
                            <table class="m-table">

                                <tbody>
                                <tr>

                                    <td width="15%"><label for="title">海报名称<em>*</em></label></td>

                                    <td><input type="text" class="u-ipt u-ipt-long" name="db[title]" id="title"
                                               placeholder="请输入海报名称" value="{$db.title|default=''}"/><span></span>
                                    </td>

                                </tr>

                                <tr>

                                    <td width="15%"><label for="">背景图片</label></td>
                                    <td>
                                        <button type="button" class="layui-btn u-upload-pic"
                                                data-name="db[image_id]"><i class="layui-icon">&#xe67c;</i>上传图片
                                        </button>
                                        <div class="m-pic">
                                            <ul>
                                                {:attach_html($db['image_id'],
                                                'db[image_id]')}
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="15%"><label>海报元素</label></td>
                                    <td>
                                        <input type="radio" lay-filter="posters_type" name="db[posters_type]" value="0" title="头像" {if
                                               condition=" isset($db['posters_type']) && ($db['posters_type'] eq 0)"
                                               } checked{/if} />
                                        <input type="radio" lay-filter="posters_type" name="db[posters_type]" value="1" title="昵称" {if
                                               condition=" isset($db['posters_type']) && ($db['posters_type'] eq 1)"
                                               } checked{/if} />
                                        <input type="radio" lay-filter="posters_type" name="db[posters_type]" value="2" title="小程序码" {if
                                               condition=" isset($db['posters_type']) && ($db['posters_type'] eq 2)"
                                               } checked{/if} />
                                    </td>
                                </tr>
                                <tr id="header_show">
                                    <td width="15%"><label>用户头像</label></td>
                                    <td>
                                        <input type="radio" name="db[header_show]" value="1" title="显示" {if
                                               condition=" isset($db['header_show']) && ($db['header_show'] eq 1)"
                                               } checked{/if} />
                                        <input type="radio" name="db[header_show]" value="0" title="不显示" {if
                                               condition=" isset($db['header_show']) && ($db['header_show'] eq 0)"
                                               } checked{/if} />
                                    </td>
                                </tr>
                                <tr  id="header_size">
                                    <td width="15%"><label>头像尺寸</label></td>
                                    <td>
                                        <input type="radio" name="db[header_size]" value="1" title="小" {if
                                               condition=" isset($db['header_size']) && ($db['header_size'] eq 1)"
                                               } checked{/if} />
                                        <input type="radio" name="db[header_size]" value="2" title="中" {if
                                               condition=" isset($db['header_size']) && ($db['header_size'] eq 2)"
                                               } checked{/if} />
                                        <input type="radio" name="db[header_size]" value="3" title="大" {if
                                               condition=" isset($db['header_size']) && ($db['header_size'] eq 3)"
                                               } checked{/if} />
                                    </td>
                                </tr>
                                <tr id="header_style">
                                    <td width="15%"><label>头像样式</label></td>
                                    <td>
                                        <input type="radio" name="db[header_style]" value="0" title="正方形" {if
                                               condition=" isset($db['header_style']) && ($db['header_style'] eq 0)"
                                               } checked{/if} />
                                        <input type="radio" name="db[header_style]" value="1" title="圆角" {if
                                               condition=" isset($db['header_style']) && ($db['header_style'] eq 1)"
                                               } checked{/if} />
                                        <input type="radio" name="db[header_style]" value="2" title="圆形" {if
                                               condition=" isset($db['header_style']) && ($db['header_style'] eq 2)"
                                               } checked{/if} />
                                    </td>
                                </tr>
                                <tr id="header_place">
                                    <td width="15%"><label>辅助对齐</label></td>
                                    <td>
                                        <input type="radio" name="db[header_place]" value="1" title="居左" {if
                                               condition=" isset($db['header_place']) && ($db['header_place'] eq 1)"
                                               } checked{/if} />
                                        <input type="radio" name="db[header_place]" value="2" title="局中" {if
                                               condition=" isset($db['header_place']) && ($db['header_place'] eq 2)"
                                               } checked{/if} />
                                        <input type="radio" name="db[header_place]" value="3" title="居右" {if
                                               condition=" isset($db['header_place']) && ($db['header_place'] eq 3)"
                                               } checked{/if} />
                                    </td>
                                </tr>

                                <tr id="nickname_show">
                                    <td width="15%"><label>用户昵称</label></td>
                                    <td>
                                        <input type="radio" name="db[nickname_show]" value="1" title="显示" {if
                                               condition=" isset($db['nickname_show']) && ($db['nickname_show'] eq 1)"
                                               } checked{/if} />
                                        <input type="radio" name="db[nickname_show]" value="0" title="不显示" {if
                                               condition=" isset($db['nickname_show']) && ($db['nickname_show'] eq 0)"
                                               } checked{/if} />
                                    </td>
                                </tr>
                                <tr id="nickname_size">
                                    <td width="15%"><label>昵称字体</label></td>
                                    <td>
                                        <input type="radio" name="db[nickname_size]" value="1" title="小" {if
                                               condition=" isset($db['nickname_size']) && ($db['nickname_size'] eq 1)"
                                               } checked{/if} />
                                        <input type="radio" name="db[nickname_size]" value="2" title="中" {if
                                               condition=" isset($db['nickname_size']) && ($db['nickname_size'] eq 2)"
                                               } checked{/if} />
                                        <input type="radio" name="db[nickname_size]" value="3" title="大" {if
                                               condition=" isset($db['nickname_size']) && ($db['nickname_size'] eq 3)"
                                               } checked{/if} />
                                    </td>
                                </tr>
                                <tr id="nickname_color">
                                    <td width="15%"><label>昵称颜色</label></td>
                                    <td>
                                        <div style="margin-left: 30px;">
                                        <div id="test1" style="width: 30px;height: 30px;border:1px dashed #000;"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr id="nickname_place">
                                    <td width="15%"><label>辅助对齐</label></td>
                                    <td>
                                        <input type="radio" name="db[nickname_place]" value="1" title="居左" {if
                                               condition=" isset($db['nickname_place']) && ($db['nickname_place'] eq 1)"
                                               } checked{/if} />
                                        <input type="radio" name="db[api_place]" value="2" title="局中" {if
                                               condition=" isset($db['nickname_place']) && ($db['nickname_place'] eq 2)"
                                               } checked{/if} />
                                        <input type="radio" name="db[nickname_place]" value="3" title="居右" {if
                                               condition=" isset($db['nickname_place']) && ($db['nickname_place'] eq 3)"
                                               } checked{/if} />
                                    </td>
                                </tr>

                                <tr id="api_show">
                                    <td width="15%"><label>小程序码是否显示</label></td>
                                    <td>
                                        <input type="radio" name="db[api_show]" value="1" title="显示" {if
                                               condition=" isset($db['api_show']) && ($db['api_show'] eq 1)"
                                               } checked{/if} />
                                        <input type="radio" name="db[api_show]" value="0" title="不显示" {if
                                               condition=" isset($db['api_show']) && ($db['api_show'] eq 0)"
                                               } checked{/if} />
                                    </td>
                                </tr>
                                <tr id="api_size">
                                    <td width="15%"><label>小程序码尺寸</label></td>
                                    <td>
                                        <input type="radio" name="db[api_size]" value="1" title="小" {if
                                               condition=" isset($db['api_size']) && ($db['api_size'] eq 1)"
                                               } checked{/if} />
                                        <input type="radio" name="db[api_size]" value="2" title="中" {if
                                               condition=" isset($db['api_size']) && ($db['api_size'] eq 2)"
                                               } checked{/if} />
                                        <input type="radio" name="db[api_size]" value="3" title="大" {if
                                               condition=" isset($db['api_size']) && ($db['api_size'] eq 3)"
                                               } checked{/if} />
                                    </td>
                                </tr>

                                <tr id="api_place">
                                    <td width="15%"><label>辅助对齐</label></td>
                                    <td>
                                        <input type="radio" name="db[api_place]" value="1" title="居左" {if
                                               condition=" isset($db['api_place']) && ($db['api_place'] eq 1)"
                                               } checked{/if} />
                                        <input type="radio" name="db[api_place]" value="2" title="局中" {if
                                               condition=" isset($db['api_place']) && ($db['api_place'] eq 2)"
                                               } checked{/if} />
                                        <input type="radio" name="db[api_size]" value="3" title="居右" {if
                                               condition=" isset($db['api_place']) && ($db['api_place'] eq 3)"
                                               } checked{/if} />
                                    </td>
                                </tr>


                                </tbody>


                            </table>
                        </div>

                    <div class="m-form-btn"><input type="hidden" name="option_name" value="distribution_posters"/><input
                            type="hidden" name="id" value="5">
                        <button id="j_btn" class="u-btn">确定提交</button>
                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

{/block}
{block name="extrajs"}
<script src="__STATIC__/public/js/jquery-ui.min.js"></script>
<script>

    layui.use('form', function () {
        var form = layui.form;

        form.on('radio(posters_type)', function (data) {

            if ($('input[name="db[posters_type]"]:checked ').val() == 0) {
                $("#header_show").show();
                $("#header_size").show();
                $("#header_style").show();
                $("#header_place").show();
                $("#nickname_show").hide();
                $("#nickname_size").hide();
                $("#nickname_color").hide();
                $("#nickname_place").hide();
                $("#api_show").hide();
                $("#api_size").hide();
                $("#api_place").hide();
            }
            if ($('input[name="db[posters_type]"]:checked ').val() == 1) {
                $("#header_show").hide();
                $("#header_size").hide();
                $("#header_style").hide();
                $("#header_place").hide();
                $("#nickname_show").show();
                $("#nickname_size").show();
                $("#nickname_color").show();
                $("#nickname_place").show();
                $("#api_show").hide();
                $("#api_size").hide();
                $("#api_place").hide();
            }
            if ($('input[name="db[posters_type]"]:checked ').val() == 2) {
                $("#header_show").hide();
                $("#header_size").hide();
                $("#header_style").hide();
                $("#header_place").hide();
                $("#nickname_show").hide();
                $("#nickname_size").hide();
                $("#nickname_color").hide();
                $("#nickname_place").hide();
                $("#api_show").show();
                $("#api_size").show();
                $("#api_place").show();
            }
            form.render();
        });
    });
</script>
{/block}